<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	
	<head>
		<title></title>
		<meta charset="utf-8" />
		<script type="text/javascript">
			function $$(id) {
				return document.getElementById(id);
			}
			window.onload = function () {
				var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
createPolygon(50, 50, 5, 40, cxt);

function createPolygon(dx, dy, n, size, cxt) {
	cxt.beginPath();
	for(var i = 0; i < n; i++) {
		var x = size * Math.cos(i * 2 * Math.PI / n) + dx;
		var y = size * Math.sin(i * 2 * Math.PI / n) + dy;
		cxt.lineTo(x, y);
	}
	cxt.fillStyle ="red";
					cxt.fill();
					cxt.closePath();
				}
            cnv.addEventListener("mousedown", downfun);
            
            function downfun(e){
            	var x = e.clientX;
            	y = e.clientY;
            	if (cxt.isPointInPath(x,y)){
            		cnv.addEventListener("mousemove", movefun);
            	}
            	cnv.addEventListener("mouseup", upfun);
            }
            	
            	function movefun(e){
            	movex = e.clientX;
            	movey = e.clientY;
            	cxt.clearRect(0,0, cnv.width, cnv.height);
            	createPolygon(movex, movey, 5, 40, cxt);
            }
            function upfun(e){
            	cnv.removeEventListener("mousemove",movefun);
            }
		}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="contextmenu="400" height="300" style="border:1px solid silver ;"></canvas>
	</body>
</html>
